<template>
  <div class="container">
    <el-container>
      <el-aside width="200px">
        <el-card>
          <el-form>
            <img style="width: 70px;border-radius: 50%" src="/qq.png">
            <div class="mt-5">admin</div>
          </el-form>
          <el-form>
            <img src="/等级.png">
          </el-form>
          <el-form inline style="margin-left: 10px">
            <el-form-item >0</el-form-item>
            <el-form-item style="margin-left: 20px">0</el-form-item>
          </el-form>
          <el-form inline>
            <el-form-item>关注</el-form-item>
            <el-form-item>粉丝</el-form-item>
          </el-form>
        </el-card>
        <el-card class="mt-5">
          <router-link to="/me">资源动态</router-link>
        </el-card>
        <el-card class="mt-5">
          <div class="mt-10">我的会员</div>
          <div @click="doubleClick" class="mt-20">我的钱包</div>
          <div @click="doubleClick" class="mt-20">我的优惠券</div>
          <div @click="doubleClick" class="mt-20">我的订单</div>
          <div @click="doubleClick" class="mt-20">我卖的</div>
        </el-card>
        <el-card class="mt-5">
          <router-link to="/material" class="mt-10">我的资料</router-link>
        </el-card>
      </el-aside>
      <el-container>
        <el-header>
          <el-card>我的会员</el-card>
        </el-header>
        <el-main>
          <el-card>
            <div class="member_info_wrapper">
              <!-- 上一部分  -->
              <div class="sectionOne">

                <div class="user_info">
                  <div class="avatar">
                    <img src="../../../public/qq.png">
                  </div>
                  <div class="name_info">
                    <p>admin</p>
                    <div data-v-5ea49fcd class="status">您还不是会员</div>
                  </div>
                </div>

                <div class="saving">开通会员平均每年可省：￥9500</div>

                <div class="price_area_main">
                  <div class="price_area">

                    <div class="price_block">
                      <div class="price_box_container">
                        <p>季度会员</p>
                        <div>￥
                          <span class="big_size">98</span>
                          <span>/季</span>
                        </div>
                        <p>合计￥98(青少年专属)</p>
                      </div>
                    </div>

                    <div class="price_block">
                      <div class="price_box_container">
                        <p>1年会员</p>
                        <div>
                          ￥
                          <span class="big_size">268</span>
                          <span>/年</span>
                        </div>
                        <p>合计￥268</p>
                      </div>
                    </div>

                    <div class="price_block">
                      <div class="price_box_container active">
                        <p>3年会员(推荐)</p>
                        <div>￥
                          <span class="big_size">196</span>
                          <span>/年</span>
                        </div>
                        <p>合计￥588(省￥216)</p>
                      </div>
                    </div>

                  </div>
                </div>

                <div class="btn_area">
                  <button @click="doubleClick" class="pay_btn el-button">
                    <span>立即以588元开通</span>
                  </button>
                </div>

                <div class="base_info agreement_guide el-row">
                  开通即视为同意
                  <a href="javascript:;">《会员服务协议》</a>
                </div>
              <!-- 下一部分     -->
              </div>
              <!-- 下一部分  -->
              <div class="section member_benefits">

                <div class="title">会员专属权益</div>

                <ul class="member_right_list">
                  <li class="right_item">
                    <div>
                      <img class="icon" src="/public/teach_video_free.png">
                      <div style="margin: 1em 0px;">
                        <p style="margin: 0px;">
                          <span style="color: rgb(249, 54, 132);">713</span>个会员专区
                        </p>
                        <p style="margin: 0px;">课程免费学习</p>
                      </div>
                    </div>
                  </li>
                  <li class="right_item">
                    <div>
                      <img class="icon" src="/public/member_preferential.png">
                      <div style="margin: 1em 0px;">
                        <p style="margin: 0px;">
                          <span>非会员专区课程可获会员立减优惠</span>
                        </p>
                      </div>
                    </div>
                  </li>
                  <li class="right_item">
                    <div>
                      <img class="icon" src="/public/member_screen@2x.png">
                      <div style="margin: 1em 0px;">
                        <p style="margin: 0px;">
                          <span>同屏对比功能</span>
                        </p>
                      </div>
                    </div>
                  </li>
                  <li class="right_item">
                    <div>
                      <img class="icon" src="/public/update_music@3x.png">
                      <div style="margin: 1em 0px;">
                        <p style="margin: 0px;">
                          <span>音频提取功能</span>
                        </p>
                      </div>
                    </div>
                  </li>
                  <li class="right_item">
                    <div>
                      <img class="icon" src="/public/music_clip@3x.png">
                      <div style="margin: 1em 0px;">
                        <p style="margin: 0px;">
                          <span>音频剪辑功能</span>
                        </p>
                      </div>
                    </div>
                  </li>
                  <li class="right_item">
                    <div>
                      <img class="icon" src="/public/member_icon_beat.png">
                      <div style="margin: 1em 0px;">
                        <p style="margin: 0px;">
                          <span>节拍口令功能</span>
                        </p>
                      </div>
                    </div>
                  </li>
                  <li class="right_item">
                    <div>
                      <img class="icon" src="/public/member_photo_download1@3x.png">
                      <div style="margin: 1em 0px;">
                        <p style="margin: 0px;">
                          <span>保存视频到手机本地相册</span>
                        </p>
                      </div>
                    </div>
                  </li>
                  <li class="right_item">
                    <div>
                      <img class="icon" src="/public/lv_ad@3x.png">
                      <div style="margin: 1em 0px;">
                        <p style="margin: 0px;">
                          <span>免广告特权</span>
                        </p>
                      </div>
                    </div>
                  </li>
                  <li class="right_item">
                    <div>
                      <img class="icon" src="/public/lv_accelerate.png">
                      <div style="margin: 1em 0px;">
                        <p style="margin: 0px;">
                          <span>成长等级加速特权</span>
                        </p>
                      </div>
                    </div>
                  </li>
                  <li class="right_item">
                    <div>
                      <img class="icon" src="/public/course_equity.png">
                      <div style="margin: 1em 0px;">
                        <p style="margin: 0px;">
                          <span>会员学习成长优先帮扶</span>
                        </p>
                      </div>
                    </div>
                  </li>
                  <li class="right_item">
                    <div>
                      <img class="icon" src="/public/member_logo.png">
                      <div style="margin: 1em 0px;">
                        <p style="margin: 0px;">
                          <span>会员专享身份标识</span>
                        </p>
                      </div>
                    </div>
                  </li>
                  <li class="right_item">
                    <div>
                      <img class="icon" src="/public/update_equity.png">
                      <div style="margin: 1em 0px;">
                        <p style="margin: 0px;">
                          <span>享受新增权益和功能</span>
                        </p>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script setup lang="ts">

import {ElMessage} from 'element-plus'
import loginApi,{type MemberListModel} from '@/api/login'
import {onMounted, ref} from 'vue'
const memberList = ref<MemberListModel>()
//获取用户会员信息
const getMember = async()=>{
  try{
    let result =await loginApi.getMemberInfo() as any;
    memberList.value= result;
    console.log(result);
  }catch (error) {
    ElMessage.error('获取会员信息错误')
  }
}


const getList = async ()=>{
  try{
    let result = await  loginApi.getUserInfo();
  }catch (error) {
    console.error(error);
  }
}

//正在开发中
let doubleClick =()=>{
  ElMessage({
    type: 'success',
    message: '正在开发中'
  })
}
onMounted(()=>{
  // getList();
  getMember();
})

</script>


<style scoped lang="less">
.container {
  width: 1200px;
  margin: 0 auto;
}
.user_info {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.sectionOne{
  border-bottom: 1px solid #e3e3e3;
}
.user_info .avatar img{
  width: 100px;
  height: 100px;
  display: inline-block;
  border-radius: 50%;
}
.name_info p{
  font-size: 20px;
  color:#000;
}
.name_info .status[data-v-5ea49fcd]{
  font-size: 14px;
  color: #f93684;
  text-align: left;
}
.saving{
  text-align: center;
  margin-top: 19px;
}
.price_area{
  width: 720px;
  min-height: 124px;
  display: flex;
  justify-content : space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: 21px auto 0;
}
.price_block{
  margin-top: 30px;
  display: block;
  text-align: center;
  line-height: 1.15;
  border: 1px solid #ccc;
  width: 220px;
  height: 130px;
  border-radius:10px;
  box-sizing: border-box;

}
.price_block p{
  line-height: 20px;
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.price_box_container.active{
  border: 2px solid #f93684;
  background-color: #f9ebf1;
  color: #f93684;
  height: 130px;
  border-radius:10px;
}
.big_size{
  font-size: 30px;
}
.sectionOne .btn_area{
  width: 330px;
  display: block;
  margin: 0 auto;
  position: relative;
}
.sectionOne .pay_btn{
  width: 330px;
  height: 56px;
  font-size: 16px;
  margin: 30px auto 12px;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
}
.sectionOne .el-button{
  color: #fff;
  border-color: #f93684;
  background-color: #f93684;
}
.el-row{
  position: relative;
  box-sizing: border-box;
  display: block;
}
.sectionOne .agreement_guide {
  text-align: center;
  padding-bottom:37px;
  font-size: 14px;
}
.base_info a{
  font-size: 14px;
  color:#f93684;
  text-decoration: none;
}

.member_info_wrapper .section{
  border-bottom: 1px solid #e3e3e3;
}
.member_info_wrapper .member_benefits{
  padding-bottom: 15px;
}
.member_info_wrapper .member_benefits div {
  display: block;
}
.member_info_wrapper .section .title {
  color: #111;
  font-weight: 700;
  font-size: 20px;
  margin-top: 32px;
}
.member_info_wrapper .member_benefits .member_right_list {
  list-style: none;
  padding-left: 19px;
  justify-content: space-between;
  color: #111;
  font-weight: 400;
  margin: 20px 0 5px;
}
ul {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}
.member_info_wrapper .member_benefits .member_right_list .right_item {
  position: relative;
  white-space: normal;
  margin-right: 30px;
  line-height: 20px;
  width: 119px;
  height: 119px;
  box-sizing: border-box;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  text-align: center;
  padding: 14px 0 0;
  font-size: 14px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 30px;
}
.member_info_wrapper .member_benefits .member_right_list .right_item [data-v-5ea49fcd]{
  white-space: normal;
  line-height:20px;
  text-align:center;
  font-size: 14px;
}

.member_info_wrapper .member_benefits .member_right_list .right_item .icon{
  display: block;
  margin: 0 auto;
  width: 46px;
  height: 42px;
  background-size: cover;
}
.member_right_list .right_item p{
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
</style>
